<template>
  <div class="person">
    <h2>prop a:{{ a }}</h2>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="PersonComponent">
import { PersonList } from '@/types';
import { withDefaults } from 'vue';
// defineProps(['a']);
// console.log(a) // 错误，不像vue2

// 正确做法
// let x = defineProps(['a', 'list']);
// console.log(x.a);

// 带类型的props，上面那种写法父组件传任何值不会有提示
// 这样写父组件有提示而且模板里面也有提示(类型+是否必传)
withDefaults(defineProps<{ list?: PersonList; a: string }>(), {
  list: () => [],
  a: 'hello',
});
</script>
<style scoped>
.person {
  color: red;
}
ul li {
  font-size: 20px;
}
</style>
